<template>
  <div class="box">
    <div class="title">
      <span style="color: rgba(166, 168, 180, 1)">接单时间：</span>
      <span style="margin-right: 24px">{{ formatDate(dataSource.takeOrdersDate) }}</span>
      <span>{{ dataSource.companyName }}</span>
    </div>
    <div class="content">
      <div style="flex: 1">
        <div style="font-size: 16px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center">
          <span>{{ dataSource.empName }}</span>
          <img v-if="dataSource.isPrecedence" src="./isPrecedence.png" style="width: 51px; height: 18px; margin-left: 8px" />
        </div>
        <div class="detail">
          <div class="item" style="width: 25%">
            <span style="color: rgba(166, 168, 180, 1)">身份证：</span>
            <span>{{ dataSource.empIdCard }}</span>
          </div>
          <div class="item" style="width: 20%">
            <span style="color: rgba(166, 168, 180, 1)">目前流程：</span>
            <span>{{ dataSource.currentWorkflow || "--" }}</span>
          </div>
          <div class="item" style="width: 15%">
            <span style="color: rgba(166, 168, 180, 1)">事件类型：</span>
            <span>{{ dataSource.eventType }}</span>
          </div>
          <div class="item" style="width: 15%">
            <span style="color: rgba(166, 168, 180, 1)">接单客服：</span>
            <span>{{ dataSource.takeOrdersUserName }}</span>
          </div>
          <div class="item" style="width: 15%">
            <span style="color: rgba(166, 168, 180, 1)">工作地点：</span>
            <span>{{ dataSource.workCity || "--" }}</span>
          </div>
        </div>
      </div>
      <a-space style="flex-shrink: 0">
        <a-button v-if="permissions_dycl.includes('dycl:dycl.dyclList:detail')" type="link" @click="detailItem">详情</a-button>
        <a-popconfirm v-if="permissions_dycl.includes('dycl:dycl.dyclList:delete')" title="确定要删除记录吗？" @confirm="deleteItem">
          <a-button type="link">删除</a-button>
        </a-popconfirm>
      </a-space>
    </div>
  </div>
</template>
<script>
import { formatDate } from "./funcs";
import { mapGetters } from "vuex";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    dataSource: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["permissions_dycl"])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    detailItem() {
      this.$router.push(`/daiyuchuli/${this.dataSource.id}/edit`);
    },
    deleteItem() {
      this.$emit("deleteItem", this.dataSource);
    },
    formatDate
  }
};
</script>
<style lang="scss" scoped>
.box {
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  margin-bottom: 24px;
  .title {
    display: flex;
    align-items: center;
    padding: 0 16px;
    line-height: 42px;
    background: #f5f5f5;
  }
  .content {
    padding: 16px;
    display: flex;
    align-items: center;
  }
  .detail {
    display: flex;
    align-items: center;
  }
}
.item {
  word-break: break-word;
  white-space: normal;
}
</style>
